<template>
  <div class="dv-title-box" :class="{ 'is-dark': isDark }">
    <div class="title-container">
      <!-- 左侧装饰 -->
      <div class="title-decoration left">
        <svg :width="decorationWidth" :height="height">
          <polyline
            class="deco-line"
            :points="`0,${height/2} ${decorationWidth * 0.3},${height/2} ${decorationWidth * 0.5},0 ${decorationWidth},0`"
            :stroke="color"
            fill="none"
            stroke-width="2"
          />
          <circle
            class="deco-dot"
            :cx="decorationWidth * 0.5"
            cy="0"
            r="3"
            :fill="color"
          >
            <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>
      
      <!-- 标题内容 -->
      <div class="title-content">
        <div class="title-text" :style="{ color: color, fontSize: fontSize + 'px' }">
          <slot></slot>
        </div>
        <div class="title-underline">
          <svg width="100%" :height="4">
            <line
              x1="0"
              y1="2"
              x2="100%"
              y2="2"
              :stroke="color"
              stroke-width="2"
              opacity="0.5"
              stroke-dasharray="5,5"
            >
              <animate attributeName="stroke-dashoffset" from="0" to="10" dur="1s" repeatCount="indefinite" />
            </line>
          </svg>
        </div>
      </div>
      
      <!-- 右侧装饰 -->
      <div class="title-decoration right">
        <svg :width="decorationWidth" :height="height">
          <polyline
            class="deco-line"
            :points="`0,0 ${decorationWidth * 0.5},0 ${decorationWidth * 0.7},${height/2} ${decorationWidth},${height/2}`"
            :stroke="color"
            fill="none"
            stroke-width="2"
          />
          <circle
            class="deco-dot"
            :cx="decorationWidth * 0.5"
            cy="0"
            r="3"
            :fill="color"
          >
            <animate attributeName="r" values="3;5;3" dur="2s" begin="1s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>
    </div>
    
    <!-- 背景光效 -->
    <div class="title-glow" v-if="isDark" :style="{ background: `radial-gradient(ellipse at center, ${color}20 0%, transparent 70%)` }"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  color?: string
  height?: number
  decorationWidth?: number
  fontSize?: number
}

const props = withDefaults(defineProps<Props>(), {
  height: 40,
  decorationWidth: 100,
  fontSize: 24
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const color = computed(() => {
  if (props.color) return props.color
  return isDark.value ? '#00d4ff' : '#409eff'
})
</script>

<style lang="scss" scoped>
.dv-title-box {
  position: relative;
  width: 100%;
  padding: 10px 0;
  
  .title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 2;
  }
  
  .title-decoration {
    flex-shrink: 0;
    
    svg {
      display: block;
      
      .deco-line {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      
      .deco-dot {
        filter: drop-shadow(0 0 5px currentColor);
      }
    }
  }
  
  .title-content {
    flex: 1;
    max-width: 600px;
    text-align: center;
    
    .title-text {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
      letter-spacing: 2px;
    }
    
    .title-underline {
      width: 100%;
    }
  }
  
  .title-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 100px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
    animation: glowPulse 3s ease-in-out infinite;
  }
  
  &.is-dark {
    .title-text {
      text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    }
    
    .deco-line {
      filter: drop-shadow(0 0 3px currentColor);
    }
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}
</style>
